<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./js/request11.js"></script>
    <link rel="stylesheet" href="./css/css.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="./css/iconfont.css">
    <link rel="stylesheet" href="./icon/iconfont1.css">
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="js/request11.js"></script>
    <style>
        .loginA {
            position: fixed;
            top: 50px;
            left: 580px;
            width: 360px;
            height: 308px;
            background-color: white;
        }

        .positioning {
            width: 360px;
            height: 308px;
            position: relative;
        }

        /* 普通登录和手机登录 */
        .positioning>div:nth-child(1)>p {
            margin-top: 40px;
            text-align: center;
            color: #00cf8c;
            font-size: 17px;
        }

        @keyframes bordera {
            0% {
                border-bottom: #00cf8c 40px solid;
            }

            100% {
                border-bottom: #00cf8c 2px solid;
            }
        }

        .positioning>div:nth-child(1)>p span:nth-child(1):hover {
            animation-name: bordera;
            animation-duration: 5s;
            animation-timing-function: linear;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;

        }

        .positioning>div:nth-child(1)>p span:nth-child(1) {
            cursor: pointer;
            display: inline-block;
            width: 144px;
            height: 47.6px;
            border-bottom: 2px solid #00cf8c;
        }

        .positioning>div:nth-child(1)>p span:nth-child(2) {
            cursor: pointer;
            display: inline-block;
            width: 144px;
            height: 47.6px;
            /* border-bottom: 2px solid #00cf8c; */
        }

        /* 输入框 */
        .myInput input {
            padding-left: 5px;
            margin-top: 20px;
            margin-left: 30px;
            border: 1px solid #d9d9d9;
            width: 300px;
            height: 28px;
            /* border: none; */
            outline: none;
        }

        .butn button {
            margin-top: 25px;
            margin-left: 30px;
            text-align: center;
            width: 300px;
            height: 30px;
            background-color: #00cf8c;
            color: white;
            border: none;
        }

        .butn a {
            margin-top: 15px;
            color: #999999 !important;
            display: inline-block;
            width: 80px;
            height: 47.6px;

        }

        .butn a:nth-of-type(1) {
            margin-left: 30px;
        }

        .butn a:nth-of-type(2) {
            margin-left: 165px;
        }

        .close {
            position: absolute;
            top: -30px;
            right: 15px;
        }
    </style>
</head>

<body>
    <!-- <button data-toggle="modal" data-target="#myModal">
        免费注册
    </button>
    <div class="modal fade top_1" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="loginA">
            <div class="positioning">

                <div>
                    <p><span>普通登录</span><span>手机登录</span></p>
                </div>
                <div class="myInput">
                    <input type="text" placeholder="🐱‍🐉请输入账号">
                    <input type="text" placeholder="🐱‍🐉请输入手机号" id="phoneNumber">
                    <input type="password" placeholder="🔒请输入密码">
                    <input type="password" placeholder="🔒请输入验证码" id="validationCold">
                </div>
                <div class="butn">
                    <button>
                        登录
                    </button>
                    <div><a href="#">立即注册！</a><a href="#">忘记密码</a></div>
                </div>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>

        </div>

    </div> -->
    <div class="bigBox">
        <div class="littleBox container">
            <ul id="myTab" class="nav nav-tabs">
                <li>
                    <a href="#home" data-toggle="tab">特别推荐</a>
                </li>
                <li>
                    <a href="#home1" data-toggle="tab">微投资</a>
                </li>
                <li>
                    <a href="#home2" data-toggle="tab">微小宝</a>
                </li>
            </ul>

            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade in active" id="home">11
                </div>
                <div class="tab-pane fade Tab_1" id="home1">1</div>
                <div class="tab-pane fade  Tab_1" id="home2">2</div>
            </div>
        </div>
    </div>

</body>

</html>
<!-- 左上角关闭 -->
<!-- <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    &times;
</button> -->